<template>
  <div class="table-page-search-wrapper" style="margin-top: 20px;">
    <a-form layout="inline" @keyup.enter.native="search">
      <a-row :gutter="48">
        <a-col :xxl="6" :xl="6" :lg="6" :sm="6">
          <a-form-item label="评价来源">
            <a-select v-model="queryParam.branId" placeholder="请选择" show-search :filter-option="filterOption">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="1">线下</a-select-option>
              <a-select-option v-for="brand in brandList" :value="brand.weid" :key="brand.weid">{{ brand.name }}</a-select-option> 
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xxl="6" :xl="6" :lg="6" :sm="6">
          <a-form-item label="是否已回复">
            <a-select v-model="queryParam.commentReply" placeholder="请选择">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="1">是</a-select-option>
              <a-select-option value="0">否</a-select-option> 
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xxl="6" :xl="6" :lg="6" :sm="6">
          <a-form-item label="是否精选">
            <a-select v-model="queryParam.handpick" placeholder="请选择">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="1">是</a-select-option>
              <a-select-option value="0">否</a-select-option> 
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xxl="6" :xl="6" :lg="6" :sm="6">
          <a-form-item label="评价状态">
            <!-- // 0隐藏 1机审核中 2机审核不通过 3人审核中 4人审核不通过 5显示 -->
            <a-select v-model="queryParam.status" placeholder="请选择">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="0">隐藏</a-select-option>
              <a-select-option value="1">机审核中</a-select-option>
              <a-select-option value="2">机审核不通过</a-select-option>
              <a-select-option value="3">人审核中</a-select-option>
              <a-select-option value="4">人审核不通过</a-select-option>
              <a-select-option value="5">显示</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xxl="8" :xl="8" :lg="8" :sm="8">
          <a-form-item label="款号">
            <a-input v-model="queryParam.productNo" placeholder="请输入" allowClear />
          </a-form-item>
        </a-col>
        <a-col :xxl="8" :xl="8" :lg="8" :sm="8">
          <a-form-item label="订单号">
            <a-input v-model="queryParam.orderCode" placeholder="请输入" allowClear />
          </a-form-item>
        </a-col>
        <a-col :xxl="8" :xl="8" :lg="8" :sm="8">
          <a-form-item label="评价时间">
            <a-range-picker style="width:100%;" show-time valueFormat="YYYY-MM-DD HH:mm:ss"
              format="YYYY-MM-DD HH:mm:ss" v-model="queryParam.time" />
          </a-form-item>
        </a-col>
        <a-col :xxl="24" :xl="24" :lg="24" :sm="24">
          <span class="table-page-search-submitButtons">
            <a-button type="primary" @click="search">查询</a-button>
            <a-button style="margin-left: 8px" @click="reset">重置</a-button>
            <a-button :disabled="btnDisabled" style="margin-left: 8px" @click="handleCommentReplyHandpick(1)">设为精选</a-button>
            <a-button :disabled="btnDisabled" style="margin-left: 8px" @click="handleCommentReplyHandpick(0)">取消精选</a-button>
            <a-button style="margin-left: 8px" type="primary" @click="handleShowRatingSet">评论设置</a-button>
            <a-button style="margin-left: 8px" @click="handleExport">导出</a-button>
          </span>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script>
import { templateUpload, templateDownload } from '@/api/micromall/communityUser'
import { brandList } from '../components/brandList.js'
export default {
  props: {
    btnDisabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      brandList,
      uploadUrl: templateUpload,
      queryParam: {
        status: '',
        handpick: '',
        commentReply: '',
        branId: ''
      }
    }
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    handleShowRatingSet() {
      this.$emit('onShowRatingSet')
    },

    handleExport() {
      this.$emit('onExport')
    },

    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },

    // 精选、取消精选
    handleCommentReplyHandpick(type) {
      this.$emit('onCommentReplyHandpick', type)
    },

    search() {
      let queryParam = this.filterFields(this.queryParam)
      this.$emit('onSearch', queryParam)
    },

    reset() {
      this.queryParam = {
        status: '',
        handpick: '',
        commentReply: '',
        branId: ''
      }
      let queryParam = this.filterFields(this.queryParam)
      this.$emit('onSearch', queryParam)
    },

    filterFields(values) {
      const formValue = {}
      Object.keys(values).forEach(i => {
        if (values[i] && values[i].length) {
          if (i === 'time') {
            console.log('time')
            formValue.startTime = values[i][0]
            formValue.endTime = values[i][1]
          } else {
            formValue[i] = values[i]
          }
        }
      })
      return formValue
    }
  }
}
</script>
<style lang="less" scoped>
.table-page-search-submitButtons {
  display: flex;
  justify-content: flex-end;
}
.product {
  display: flex;
  align-items: center;
  overflow: hidden;
  .img {
    display: block;
    margin: 0 2px;
    width: 60px;
    height: 60px;
    border: 1px dashed #f5f5f5;
    object-fit: scale-down;
    cursor: pointer;
  }
  .product-name {
    flex: 1;
    margin-left: 5px;
    width: 80px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    word-break: break-all; /* 追加这一行代码 */
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
  }
}
</style>
<style scoped>
/* For demo */
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
</style>
